<template>
    <div class="cl-recipe-select">
        <el-tree-select v-model="value" :data="tree" :props="{
            label: 'name',
            value: 'id',
            disabled: 'disabled',
            children: 'children'
        }" clearable default-expand-all check-strictly filterable :size="size" :placeholder="placeholder" />
    </div>
</template>

<script lang="ts" name="cl-recipe-select" setup>
import { useForm } from "@cool-vue/crud";
import { cloneDeep } from "lodash-es";
import { computed, ref, useModel, onMounted } from "vue";
import { useCool } from "/@/cool";
import { deepTree } from "/@/cool/utils";

const props = defineProps({
    modelValue: [Number, String],
    type: {
        type: Number,
        default: 1
    },
    placeholder: String,
    size: String
});

const emit = defineEmits(["update:modelValue"]);

const { service } = useCool();
const Form = useForm();

// 绑定值
const value = useModel(props, "modelValue", {
    get(val) {
        return val ? Number(val) : val;
    }
});

// 菜单列表
const list = ref<any[]>([]);

// 树形列表
const tree = computed(() => {
    // 过滤掉自己和下级的数据
    const data = cloneDeep(list.value).filter((e) => {
        if (e.name) {
            return e
        }
    });
    return deepTree(data)
});

// 刷新列表
function refresh() {
    service.broadcast.recipe.list().then((res) => {
        list.value = res;
    });
}

onMounted(() => {
    refresh();
});
</script>

<style lang="scss" scoped>
.cl-recipe-select {
    :deep(.el-select) {
        width: 100%;
    }
}
</style>
